<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zss
 * @Date: 2025-02-27 12:00:44
 * @LastEditors: zss
 * @LastEditTime: 2025-02-27 21:18:26
-->
// OtherFlowPanel.vue
<template>
  <div class="other-flow-card">
    <div class="card-header">
      <div class="title">
        其他流量计
        <i class="wy-icon wy-GIS-TL_liuliangji"></i>
      </div>
    </div>

    <!--  -->
    <div class="card-body">
      <div class="flow-item" v-for="(flow, index) in flows" :key="index">
        <div class="flow-name">{{ flow.label }}</div>
        <!-- <div class="flow-value">{{ flow.value }}m³</div> -->
        <animated-number :value="flow.value" suffix="m³" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { T_srv, T_cmd, Tsrv, vue } from './config';
import AnimatedNumber from './AnimatedNumber.vue';

@T_srv.comp({ components: { AnimatedNumber } })
export default class WasteWaterFlow extends vue {
  @T_srv.prop({ required: true }) flows;
}
</script>
<style lang="scss" scoped>
.other-flow-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #607d8b;
  border-radius: 8px;
  padding: 16px;
  .card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: white;
      text-align: center;
      i {
        font-size: 24px;
        margin-left: 8px;
      }
    }
  }
  .card-body {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;
    .flow-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 25%;
      height: 100%;
      border: 1px solid #fff;
      // border-radius: 8px;
      padding: 16px;
      .flow-name {
        font-size: 14px;
        color: white;
        margin-bottom: 8px;
      }
      .flow-value {
        font-size: 24px;
        font-weight: bold;
        color: white;
      }
    }
  }
}
</style>
